<template>
    <el-calendar>
        <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
        <template slot="dateCell" slot-scope="{ date, data }">
            <p :class="data.isSelected ? 'is-selected' : ''" @click="addTodoToday($event)">
                {{ data.day.split('-').slice(2).join('-') }}

            </p>
            <!-- <div  @click="TodoToday(value)" v-for="(value,index) in item" :key="index">
            <span>{{ value.title }}:{{ value.textarea }}</span>
          </div> -->
        </template>
    </el-calendar>
</template>
  
<script>
import { todoListApi } from "@/api/timeApi";

export default {
    props: ['dialogVisible', 'setDialogVisible'],
    data() {
        return {
            item: [],
            data: ''
        };
    },
    mounted($event) {

        // console.log(ids);
        // this.addTodoToday($event)
    },
    methods: {
        async addTodoToday($event) {
    this.setDialogVisible(true);
    var parent = $event.target.parentNode;
    let id = $event.target.textContent;
    console.log(id);
    setTimeout(async () => {
        let ret = await todoListApi(id);
        if (ret.code === 0) {
            console.log(ret.data);
            this.item = ret.data;
            var child = document.createElement('div');
            var todo = this.item.map(item => {
                return item.title + ":" + item.textarea;
            });
            child.textContent = todo;
            parent.append(child);
            child.className = 'todo';
        } else {
            this.$message({
                message: '还未添加待办事件',
                type: 'success',
                showClose: true, // 手动关闭
                duration: 3000,
            });
        }
    }, 9000);
},
            // }, 3000);

        
        TodoToday(value) {
        }
    },
};
</script>
  
<style lang="stylus" >
.todo{
    background-color: skyblue;
    color: rgba(240, 82, 10, 0.637);
    font-size: 16px;
}
</style>
